iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
自我挑戰組

新手遇上Vue.js系列 第 10

Day11 事件修飾符(2)

  • 分享至 

  • xImage
  •  

上次介紹完前面兩個修飾符,今天就來把它學習完吧!!!
.stop
.prevent
.capture
.self
.once
.passive

3. .capture
加入.capture修飾符的DOM將會優先觸發,這個例子將.capture加入最外層,所以觸發的順序是外→內→中,因此可知.capture不遵守從裡至外的順序
https://ithelp.ithome.com.tw/upload/images/20210925/20140076GuBxHa8L9Y.png
https://ithelp.ithome.com.tw/upload/images/20210925/20140076ZNXUiWnKvN.png
https://ithelp.ithome.com.tw/upload/images/20210925/20140076frB6RkhbLc.png
https://ithelp.ithome.com.tw/upload/images/20210925/20140076S3icxZqzOe.png
https://ithelp.ithome.com.tw/upload/images/20210925/20140076DJ0FsfFs5p.png

4. .self
大多數的教學都是說.self只會觸發自己範圍內的事件,不包含子元素,對於我第一次學實在是不太了解,操作完後的理解是它只阻擋自己的事件
這次的範例是加在最外層,跑出的順序為內→中
https://ithelp.ithome.com.tw/upload/images/20210925/20140076CVN4utxuvi.png

5. .once
加入.once修飾符的事件,僅能觸發一次。這次的範例是每當我按下加1按鈕下面的count從0開始加1
https://ithelp.ithome.com.tw/upload/images/20210925/20140076jCp50ByvE2.png
https://ithelp.ithome.com.tw/upload/images/20210925/20140076f0zS2EeDs1.png
https://ithelp.ithome.com.tw/upload/images/20210925/20140076BG6Q4sq9oK.png
https://ithelp.ithome.com.tw/upload/images/20210925/20140076ZVsZJyRfeo.png
當我加入.once後,僅能加一次1
https://ithelp.ithome.com.tw/upload/images/20210925/20140076iqyRUOUg8h.png
https://ithelp.ithome.com.tw/upload/images/20210925/20140076jGRKPoJlJ4.png

6. .passive
.passive可以忽略.prevent只要加上.passive就一定可以觸發網頁
https://ithelp.ithome.com.tw/upload/images/20210925/20140076WUPov46Vq0.png

小提醒!!!
一個句子裡面可以加入多個修飾符,其中放入的順序將會影響執行結果
例如: <div @click.self.prevent="middle">會先執行self指阻擋自己的行為,而<div @click. prevent.self ="middle">將會阻擋一切點擊行為

明天就要來學習按鍵修飾符了!

資料來源:
https://cn.vuejs.org/v2/guide/events.html
https://book.vue.tw/CH1/1-5-events.html
https://cythilya.github.io/2017/04/17/vue-methods-and-event-handling/


上一篇
Day9 Methods and v-on
下一篇
Day10 事件修飾符 (1)
系列文
新手遇上Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言